<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElTable } from 'element-plus'
import { fromPairs, method } from 'lodash';
import { ElMessage } from 'element-plus';
import service from "../../utils/service";
interface Idata {
  id: string,
  name: string,
  unit: string,
  upper: number,
  normal: string,
  higher: string,
  littler: string,
  iscontrast: string,
  operate: string,
}
//添加数据
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  id: "",
  name: "",
  unit: "",
  upper: "",
  lower: "",
  normal: "",
  higher: "",
  littler: "",
  iscontrast: true,
});
const onSubmit = () => {
  if (form.name && form.id && form.unit && form.upper && form.normal && form.higher && form.littler) {
    service({
      url: "/standardIndicator",
      method: "post",
      data: {
        id: form.id,
        name: form.name,
        iscontrast: form.iscontrast?"是":"否",
        unit: form.unit,
        upper: form.upper,
        normal: form.normal,
        higher: form.higher,
        littler: form.littler
      }
    }).then(res => {
      if (res.data) {
        ElMessage({
          message: '恭喜您，亲，您的文件上传成功',
          type: 'success',
        })
        dialogFormVisible.value = false
        inquire()
        form.name = ""
        form.id = ""
        form.iscontrast = true
        form.unit = ""
        form.upper = ""
        form.normal = ""
        form.higher = ""
        form.littler = ""
      }
    })
  } else {
    ElMessage({
      message: '亲，您还没有添加完整的内容哦！！！',
      type: 'error',
    })
  }
}
const tianjia = () => {
  isshow02.value = false
  isshow01.value = true
  dialogFormVisible.value = true
  form.name = ""
  form.id = ""
  form.iscontrast = true
  form.unit = ""
  form.upper = ""
  form.normal = ""
  form.higher = ""
  form.littler = ""
}
// 修改单调数据
//第一：先获取数据
const isshow01 = ref<boolean>(true)
const isshow02 = ref<boolean>(false)
let ids = ref<string>()
const editFn = (id: string) => {
  isshow02.value = true
  isshow01.value = false
  dialogFormVisible.value = true
  ids.value = id
  service({
    url: "/standardIndicator",
    method: "get",
    params: {
      id: id
    },
  }).then(res => {
    if (res.data) {
      form.name = res.data[0].name
      form.id = res.data[0].id
      if (res.data[0].iscontrast == "是") {
        form.iscontrast = true
      } else {
        form.iscontrast = false
      }
      form.unit = res.data[0].unit
      form.upper = res.data[0].upper
      form.normal = res.data[0].normal
      form.higher = res.data[0].higher
      form.littler = res.data[0].littler
    }
  })
}
// 第二：修改数据
const xiugai = () => {
  if (form.name && form.id && form.unit && form.upper && form.normal && form.higher && form.littler) {
    service({
      url: `/standardIndicator/${ids.value}`,
      method: "PATCH",
      data: {
        id: form.id,
        name: form.name,
        iscontrast: form.iscontrast?"是":"否",
        unit: form.unit,
        upper: form.upper,
        normal: form.normal,
        higher: form.higher,
        littler: form.littler
      }
    }).then(res => {
      if (res.data) {
        ElMessage({
          message: '恭喜您，亲，您的文件修改成功',
          type: 'success',
        })
        dialogFormVisible.value = false
        getQuotePrice(params)
      }
    })
  } else {
    ElMessage({
      message: '亲，您还没有添加完整的内容哦！！！',
      type: 'error',
    })
  }
}
// 删除单条数据
const delFn = (id: string) => {
  ids.value = id
  service({
    url: `/standardIndicator/${ids.value}`,
    method: "DELETE",
  }).then(res => {
    if (res.data) {
      ElMessage({
        message: '删除成功！',
        type: 'success',
      })
      getQuotePrice(params)
    }

  })
}
// 删除多条数据
const multipleSelection = reactive<Idata[]>([])
const multipleArr = reactive<string[]>([])
const handleSelectionChange = (val: Idata[]) => {
  multipleSelection.length = 0
  multipleSelection.push(...val)
  multipleArr.length = 0
  multipleSelection.forEach(item => {
    multipleArr.push(item.id)
  })
  console.log(multipleArr);
}
const showss = ref<boolean>(false)
const Isshows4 = () => {
  if (multipleArr.length != 0) {
    showss.value = true
  }
}
const IsShows2 = () => {
  showss.value = false
}
const delQuoteds = () => {
  multipleArr.forEach(item => {
    service({
      url: `/standardIndicator/${item}`,
      method: "DELETE",
    }).then(res => {
      ElMessage({
        message: '删除成功！',
        type: 'success',
      })
      getQuotePrice(params)
      showss.value = false
    })
  })
  showss.value = false
}
//指标状态
const selectvalue = ref<string>()
const options = [
  {
    value: '是',
    label: '是',
  },
  {
    value: '否',
    label: '否',
  },
]
// 数据查询
interface Iparam {
  _page?: number,
  _limit?: number,
  iscontrast?: string,
}
let input = ref<string>("")
let params1 = reactive<Iparam>({})
let params = reactive<Iparam>({
  _page: 1,
  _limit: 10
})
// 数据数量
const total = ref<number>()
// 定义数组数据
const getQuotePriceList = reactive<Idata[]>([]);
// 发请求获取数据
const getQuotePrice = (params: Iparam) => {
  service({
    url: "/standardIndicator?q=" + input.value,
    method: "get",
    params
  }).then(res => {
    getQuotePriceList.length = 0
    res.data.forEach((item: Idata) => {
      getQuotePriceList.push(item)
    });
  })
}
// getQuotePrice(params)
// 获取总数据条
const getQuotePriceNum = (params: Iparam) => {
  service({
    url: "/standardIndicator?q=" + input.value,
    method: "get",
    params:params1
  }).then(res => {
    total.value = res.data.length
    console.log("total.value",total.value);
  })
}
// getQuotePriceNum(params)

// 搜索后重新渲染
const inquire = (val?: number) => {
  if (val) {
    params = {
      _page: val,
      _limit: 10
    }
  } else {
    params = {
      _page: 1,
      _limit: 10
    }
  }
  params1 = {}
  selectvalue.value && (params.iscontrast = selectvalue.value)
  selectvalue.value && (params1.iscontrast = selectvalue.value)
  getQuotePrice(params)
  getQuotePriceNum(params)
}
inquire()
// 审批状态查询
const changestatus = () => {
  inquire()
}
const pages = ref<number>(1)
const handleSizeChange = () => {
  getQuotePrice(params)
}
//分页改变页面
const changePage = (value: number) => {
  inquire(value)
}
// 重置
const resetting = () => {
    input.value = ''
    selectvalue.value = ''
    inquire()
}
</script>

<template>
  <div>
    <div class="top">标准指标管理</div>
    <div class="main">
      <div class="spone">数据筛选</div>
      <el-divider />
      <div class="sptwo">
        <span>输入查询：</span> <el-input v-model="input" filterable clearable placeholder="指标名称"
          style="width: 190px; margin-right: 50px;" />
        <!-- 下拉菜单 -->
        <span>是否比对：</span> <el-select v-model="selectvalue" class="m-2" filterable clearable placeholder="全部"
          style="width: 170px; margin-right: 300px;" @change="changestatus">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="button1">
          <el-button type="primary" @click="inquire()">查询</el-button>
          <el-button @click="resetting()">重置</el-button>
        </div>
      </div>
      <el-divider />
      <div class="quotedPrice_title_right">
        <el-button class="leading-out" text @click="tianjia()">添加</el-button>
        <el-button class="delspan" @click="Isshows4()">删除</el-button>
        <el-button class="leading-out" @click="">导入</el-button>
        <!-- 添加表格 -->
        <el-dialog style="height:100%;overflow-y:scroll;" v-model="dialogFormVisible" title="新增体检指标">
          <el-form :model="form">
            <el-form-item class="input-content" label="*标准指标名称:" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item class="input-content" label="*套餐ID:" :label-width="formLabelWidth">
              <el-input v-model="form.id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="*是否对比:" :label-width="formLabelWidth">
              <el-switch v-model="form.iscontrast" />
            </el-form-item>
            <el-form-item class="input-content" label="*指标单位:" :label-width="formLabelWidth">
              <el-input v-model="form.unit" autocomplete="off" />
            </el-form-item>
            <el-form-item class="input-content" label="*参考上限:" :label-width="formLabelWidth">
              <el-input v-model="form.upper" autocomplete="off" />
            </el-form-item>
            <el-form-item label="正常提示:" :label-width="formLabelWidth">
              <el-input v-model="form.normal" :rows="6" type="textarea" />
            </el-form-item>
            <el-form-item label="偏高提示:" :label-width="formLabelWidth">
              <el-input v-model="form.higher" :rows="6" type="textarea" />
            </el-form-item>
            <el-form-item label="偏低提示:" :label-width="formLabelWidth">
              <el-input v-model="form.littler" :rows="6" type="textarea" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer" v-if="isshow01">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="onSubmit()">
                确定
              </el-button>
            </span>
            <span class="dialog-footer01" v-if="isshow02">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="xiugai()">
                修改
              </el-button>
            </span>
          </template>
        </el-dialog>
        <!-- 删除多条 -->
        <div class="delshow" v-if="showss">
          <img src="https://img.51miz.com/Element/00/36/87/35/452c49a2_E368735_54703b13.png" alt="">
          <span class="span1">删除确认</span>
          <span class="span2">删除后无法恢复,确定要删除此条信息吗?</span>
          <div>
            <span @click="IsShows2">取消</span>
            <el-popconfirm title="亲，您不再考虑一下？" @confirm="delQuoteds()">
              <template #reference>
                <span>确定</span>
              </template>
            </el-popconfirm>
          </div>
        </div>

      </div>
      <div class="spthree">
        <el-table ref="multipleTableRef" :data="getQuotePriceList" style="width: 100%;" :border="true"
          :highlight-current-row="false" :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
          :header-cell-style="{ 'text-align': 'center', 'background-color': '#f9ffc', 'color': '#666' }"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" />
          <el-table-column property="id" label="标准指标ID" width="100" />
          <el-table-column property="name" label="标准指标名称" width="120" />
          <el-table-column property="unit" label="指标单位" width="105" />
          <el-table-column property="upper" label="参考上限" width="100" />
          <el-table-column property="lower" label="参考下限" width="100" />
          <el-table-column property="normal" label="正常提示" width="110" />
          <el-table-column property="higher" label="偏高提示" width="100" />
          <el-table-column property="littler" label="偏低提示" width="100" />
          <el-table-column property="iscontrast" label="是否对比" width="85">
            <template #default="scope">
              <span>{{ scope.row.iscontrast}}</span>
            </template>
          </el-table-column>
          <el-table-column property="operate" label="操作" width="100">
            <template #default="scope" class="scope01">
              <el-button class="button01" @click=editFn(scope.row.id)>编辑</el-button>
              <el-popconfirm title="您真的想好要舍弃我了吗？" @confirm="delFn(scope.row.id)">
                <template #reference>
                  <el-button class="button01">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination_Box">
          <el-pagination :page-size="params._limit" v-model:current-page="pages" background
            layout="prev, pager, next,jumper" :total="total" @current-change="changePage"
            @size-change="handleSizeChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top {
  height: 50px;
  background-color: white;
  line-height: 50px;
  padding-left: 10px;
}

.main {
  height: 100%;
  background-color: white;
  margin-top: 20px;
}

.spone {
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 20px;
}

.sptwo {
  height: 50px;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 20px;

}

.delspan {
  width: 80px;
  border: 1px solid gray;
}

.leading-out {
  border: 1px solid gray;
  width: 80px;
  margin-left: 20px;
}

.spthree {
  margin-top: 20px;
}

.el-select {
  font-size: 12px;
}

.el-input {
  margin-right: 20px;
}

.demo-date-picker {
  display: flex;
  /* width: 100%; */
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.button01 {
  border: 0px;
  background-color: transparent;
  font-size: 12px;
  width: 20px;
  height: 20px;
  display: inline;
  color: aquamarine;
}

.delshow {
  border-width: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 447px;
  height: 262px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 2px 2px 14px rgb(0 0 0 / 35%);
  box-shadow: 2px 2px 14px rgb(0 0 0 / 35%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  align-items: center;
}

.delshow img {
  width: 63px;
  height: 63px;
}

.delshow .span1 {
  padding: 3px 10px;
  font-size: 16px;
  color: #333333;
}

.delshow .span2 {
  font-size: 13px;
  color: #999999;
  padding: 10px;
}

.delshow div {
  width: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.delshow div span {
  width: 83px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 4px;
  margin: 10px;
  cursor: pointer;
}

.delshow div span:nth-child(1) {
  background-color: #E8F2FF;
  color: #197CFEEA;
}

.delshow div span:nth-child(2) {
  background-color: #006EFF;
  color: #fff;
}
</style>